<template>
  <div class="myinfo">
    <hm-nav-bar title="我的资料" path="/home/my"></hm-nav-bar>
    <div class="content">
      <my-cell
        title="头像"
        type="img"
        :value="userInfo.avatar"
        @click.native="goInfo('avatar')"
      ></my-cell>
      <div class="other">
        <my-cell
          title="昵称"
          :value="userInfo.nickname"
          @click.native="goInfo('nickname')"
        ></my-cell>
        <my-cell
          title="性别"
          :value="genderObj[userInfo.gender]"
          @click.native="isShow = true"
        ></my-cell>
        <my-cell
          title="地区"
          :value="areaData.city_list[userInfo.area]"
          @click.native="showCity = true"
        ></my-cell>
        <my-cell
          title="个人简介"
          :value="userInfo.intro"
          @click.native="goInfo('intro')"
        ></my-cell>
      </div>
      <van-button class="btn" black @click="exit"
        ><span class="color">退出登入</span></van-button
      >
    </div>
    <!-- 性别 -->
    <van-popup v-model="isShow" position="bottom">
      <van-picker
        title="性别请选择"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="userInfo.gender"
        @cancel="isShow = false"
        @confirm="genderConfirm"
      >
      </van-picker>
    </van-popup>
    <!-- 城市 -->
    <van-popup v-model="showCity" position="bottom">
      <van-area
        title="城市选择"
        columns-num="2"
        :value="userInfo.area"
        @cancel="showCity = false"
        @confirm="cityConfirm"
        :area-list="areaData"
      >
      </van-area>
    </van-popup>
  </div>
</template>
<script>
// 导入myCell
import myCell from './myCell'
import { removeToken } from '../../../utils/token'
import { mapState } from 'vuex'
import { auEdit } from '../../../api/my'
// 导入城市数据
import area from '@/assets/js/area.js'
export default {
  name: 'myInfo',
  // 注册
  components: {
    myCell
  },
  data () {
    return {
      isShow: false,
      showCity: false,
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      },
      areaData: area
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    exit () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '您确认退出吗'
        })
        .then(() => {
          // 确认退出
          removeToken('token')
          this.$store.commit('setLoginState', false)
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    // 参数gender  area
    genderConfirm (value, index) {
      this.isShow = false
      this.editInfo('gender', index)
    },
    cityConfirm (value, index) {
      this.showCity = false
      // 因为 columns-num="2" 表示只显示省市 选中某省某市 打印value是数组 因为有省市两项 索引为1 的是市因此value[1]
      // code是城市编码 我们要的参数名是area 参数是城市编码
      this.editInfo('area', value[1].code)
    },
    // 编辑用户信息
    editInfo (key, value) {
      // 编辑用户信息 参数都不是必选的 可选 此处改性别 就传性别一个参数 城市也修改 因此不能写死
      // 属性名是变量 不能直接使用 需要加中括号包起来 形参是变量
      auEdit({ [key]: value }).then(res => {
        // 能进then方法一定是请求到了的 因为在拦截器里面做了处理
        this.$toast.success('个人资料修改成功')
        // 刷新用户信息
        this.$store.dispatch('getUserInfo')
      })
    },
    // 修改昵称简介等等
    goInfo (str) {
      this.$router.push('/home/editInfo?type=' + str)
    }
  }
}
</script>
<style lang="less" scoped>
.myinfo {
  background-color: #f7f4f5;
  height: 100%;
  .content {
    padding: 16px @p15;
    .other {
      margin-top: 10px;
    }
  }
  .btn {
    width: 100%;
    border-radius: 8px;
    margin-top: 10px;
    .color {
      color: red;
    }
  }
}
</style>
